<script setup lang="ts">
/** 父组件传参
 * @param menu 菜单项
 */
const { menu, collapse } = defineProps({
  menu: {
    type: Object,
    required: true,
  },
  collapse: {
    type: Boolean,
    default: false,
  },
});

// 获取全局路由
const router = useRouter();

// 打开页面
function openPage(menu: any) {
  // 路由跳转
  router.push(menu.path);
}
</script>

<template>
  <!-- 菜单项有children时，用el-sub-menu渲染 -->
  <el-sub-menu
    v-if="menu.children && menu.children.length > 0"
    :index="menu.index"
  >
    <template #title>
      <S-icon
        :icon="menu.icon || ''"
        :style="{
          'font-size': menu.index.split('-').length === 1 ? '22px' : '16px',
        }"
        class="mr-2"
      />

      <span v-if="!collapse" class="font-600 text-16px">{{ menu.label }}</span>
    </template>

    <!-- children的菜单项，递归调用自己实现渲染 -->
    <S-subMenu v-for="child in menu.children" :menu="child" :key="child.path" />
  </el-sub-menu>

  <!-- 菜单项无children时，用el-menu-item渲染 -->
  <template v-else>
    <el-menu-item
      v-if="menu.index.split('-').length === 1"
      :index="menu.index"
      @click="openPage(menu)"
    >
      <S-icon :icon="menu.icon || ''" class="mr-2 text-22px" />
      <span v-if="!collapse" class="font-600 text-16px"> {{ menu.label }}</span>
    </el-menu-item>

    <el-menu-item v-else :index="menu.index" @click="openPage(menu)">
      <S-icon :icon="menu.icon || ''" class="mr-2 text-16px" />
      {{ menu.label }}</el-menu-item
    >
  </template>
</template>
